import { Component } from 'react'

class Right extends Component {
  removeClick = (number, e) => {
    e.preventDefault()
    if (window.confirm('确认删除？')){
      this.props.remove(number)
    }
  }

  averageAge = () =>  {
    if ( !this.props.students || this.props.students.length)
      return 0
    let sum = 0
    this.props.students.forEach(s => {
      sum += s.age;
    })
    return Math.floor(sum/this.props.students.length)
  }

  render() {
    return (
      <div className="col-md-6 col-md-offset-1">
        <table className="table table-striped table-hover">
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>入学时间</th>
              <th>爱好</th>
              <th>所属学院</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {this.props.students.map(student => {
              return (
                <tr key={student.number}>
                  <td>{student.number}</td>
                  <td>{student.name}</td>
                  <td>{student.sex}</td>
                  <td>{student.age}</td>
                  <td>
                    {student.hobbies.map((hobby, index) => {
                      return (<span key={index}>{hobby}</span>)
                    })}
                  </td>
                  <td>{student.college}</td>
                  <td>
                    <a href="www.lagou.com" onClick={this.removeClick.bind(this,student.number)}>删除</a>
                    <a href="www.lagou.com">修改</a>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {this.props.students.length > 0 ? null : <p className="text-center">无学生信息</p>}
        <p>总共有 {this.props.students.length} 个学生</p>
        <p>学生的平均年龄是 {this.averageAge()}</p>
      </div>
    )
  }
}
export default Right